import { defineComponent, ref, watch, nextTick } from "vue";
import util from "@/libs/util";
import columns from "./columns";
import PermissionBtn from "@/components/permission-btn";
import { Divider } from "view-ui-plus";
import { useTableList, useEditTable } from "@/hooks";
import { getPage, onEdit } from "@/api/baseData/testProject";
import CheckMethodModal from "../checkMethodModal";
import { getDictionary } from "@/api/common";

export default defineComponent({
  props: {
    projectNameCodes: String,
  },
  emits: ["radioChange"],
  setup(props, { emit }) {
    // ref
    const standardIcrud = ref<HTMLElement>();
    // option配置
    const iCrudOptions = util.env.iCrudOptions;
    // 列表数据
    const list = ref<any>([]);
    // 列表配置
    const columnsTable = columns;
    // 跨页多选
    const selectionRowOptions = {
      selectKey: "id", // 跨页多选的参考字段，数据唯一
      batchRemove: util.env.iCrudOptions.selectionRowOptions.batchRemove, //删除按钮样式
    };

    const show = ref(false);

    const selectedRow = ref();

    const resultUnit = ref([]);

    getDictionary({ dictType: "result_unit" }).then((res: any) => {
      resultUnit.value = res;
    });

    let getApiTableList;

    watch(
      () => props.projectNameCodes,
      (value) => {
        if (value) {
          const data = useTableList(
            getPage,
            list,
            (list) => {
              return list.map((item, i) => ({
                ...item,
                sort: i + 1,
              }));
            },
            {
              projectNameCodes: value,
            }
          );
          getApiTableList = data.getApiTableList;
          nextTick(() => {
            const icrudRefs: any = standardIcrud.value;
            icrudRefs.handleFetchData();
          });
        }
      }
    );

    const onAdd = (row, column, index) => {
      show.value = true;
    };

    const { editTableApi } = useEditTable(selectedRow, onEdit, (params) => {
      return {
        ...params,
        caltStatus: params.caltStatus && params.caltStatus[0],
        cmaStatus: params.cmaStatus && params.cmaStatus[0],
        noDiscountStatus: params.noDiscountStatus && params.noDiscountStatus[0],
        subcontractAllowedStatus:
          params.subcontractAllowedStatus && params.subcontractAllowedStatus[0],
        unrecordedResultStatus:
          params.unrecordedResultStatus && params.unrecordedResultStatus[0],
      };
    });

    // 删除操作
    const deleteTableApi = () => {
      return new Promise((resolve, reject) => {});
    };
    // 多选删除
    const delMultipleTableApi = (selectRow) => {
      return new Promise((resolve, reject) => {});
    };
    // 设置表格多选选中的数据
    const setCheckedItem = (item) => {};
    // 编辑按钮
    const handleShowEditDialog = (row: any, column: any, index: number) => {
      selectedRow.value = row;
      const icrudRefs: any = standardIcrud.value;
      icrudRefs.handleShowEditDialog({ row, column, index });
    };
    // 删除按钮
    const handleShowRemoveDialog = (row: any, column: any, index: number) => {
      const icrudRefs: any = standardIcrud.value;
      icrudRefs.handleShowRemoveDialog({ row, column, index });
    };

    const checkMethodChange = () => {
      const icrudRefs: any = standardIcrud.value;
      icrudRefs.handleFetchData();
    };

    const radioChange = ({ row }) => {
      emit("radioChange", row.id);
    };

    const operOptions = ({ row, column, index }) => {
      return (
        <span>
          <PermissionBtn
            title="修改"
            btn-info={{ icon: "md-create" }}
            type="text"
            isDivider={false}
            onClick={() => handleShowEditDialog(row, column, index)}
          />
          <PermissionBtn
            title="上传作业指导书"
            btn-info={{ icon: "md-cloud-upload" }}
            type="text"
            onClick={() => handleShowEditDialog(row, column, index)}
          />
        </span>
      );
    };

    const actions = ({ row, column, index }) => {
      return (
        <PermissionBtn
          title="添加"
          btn-info={{ icon: "md-add", type: "primary" }}
          type="button"
          onClick={() => onAdd(row, column, index)}
        />
      );
    };

    const specificationUnit = ({ row }) => {
      const obj = resultUnit.value.find(
        (item) => item.dictValue === row.specificationUnit
      );
      return obj && obj.dictLabel;
    };

    //刷新数据
    return () => {
      if (!props.projectNameCodes) return <span></span>;
      return (
        <div style={{ width: "1300px" }}>
          <i-crud
            table="vxe"
            title="检测方法"
            ref={standardIcrud}
            form-options={{ ...iCrudOptions.formOptions, labelWidth: 100 }}
            page-options={{ show: false }}
            search-options={iCrudOptions.searchOptions}
            border={false}
            data={list.value}
            columns={columnsTable}
            fetch-data={getApiTableList}
            fetch-edit={editTableApi}
            fetch-remove={deleteTableApi}
            fetch-batch-remove={delMultipleTableApi}
            onOnSelectionChange={setCheckedItem}
            toolbarOptions={{ show: true, items: ["refresh"] }}
            addFormOptions={{
              show: false,
            }}
            radio-row={{
              width: 60,
              align: "center",
              showClear: true,
              nativeRadio: true,
            }}
            onRadioChange={radioChange}
            options={{
              radioConfig: {
                highlight: true,
              },
            }}
            v-slots={{
              operOptions: operOptions,
              actions: actions,
              specificationUnit,
            }}
          ></i-crud>
          <CheckMethodModal
            v-model={show.value}
            projectNameCode={props.projectNameCodes}
            onChange={checkMethodChange}
          />
        </div>
      );
    };
  },
});
